<template>
  <div class="order_curd">
    <div class="carousel_header">
      <input type="订单编号" class="car_select" placeholder="订单编号" />
      <el-date-picker
        class="riqi"
        v-model="value"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="defaultTime"
      />
      <select
        name=""
        id=""
        aria-placeholder="请选择订单状态"
        class="car_select1"
      >
        <option value="1">待付款</option>
        <option value="2">待发货</option>
        <option value="3">待收货</option>
        <option value="4">待评价</option>
        <option value="5">成功</option>
        <option value="6">失败</option>
      </select>
      <el-button type="primary" class="btn">查询</el-button>
      <el-upload
        :auto-upload="false"
        :show-file-list="false"
        action="action"
        :on-change="handleChange"
      >
        <el-button type="primary" class="btn">导出销售记录</el-button>
      </el-upload>
      <el-button type="primary" @click="handleGet" class="btn"
        >导出待发货名单</el-button
      >
      <el-button class="btn">清空</el-button>
    </div>
    <div class="tit">
      <div class="el_row">
        <div class="el_col-10"><span>商品</span></div>
        <div class="el_col-3"><span>成交单价/购买数量</span></div>
        <div class="el_col-3"><span>实付金额</span></div>
        <div class="el_col-3"><span>支付方式</span></div>
        <div class="el_col-3"><span>订单状态</span></div>
        <div class="el_col-2"><span>操作</span></div>
      </div>
      <div v-for="(item, index) in list" :key="index">
        <div class="prod">
          <div class="prod_tit">
            <p style="margin-left: 10px">
              订单编号：{{ item.orderNumber }}下单时间：{{ item.updateTime }}
            </p>
          </div>
          <div class="prod_cont">
            <div class="prod_el_row">
              <div class="prod_el_col_10">
                <div
                  class="prod_item"
                  v-for="(item1, index1) in item.orderItems"
                  :key="index1"
                >
                  <div class="items">
                    <div class="image">
                      <img :src="url + item1.pic" alt="" />
                    </div>
                    <div class="items_cont">
                      <div class="name">{{ item1.prodName }}</div>
                      <div class="price">{{ item1.skuName }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="prod_el_col_3">￥{{ item.actualTotal }}</div>
              <div class="prod_el_col_4">
                <p class="total">￥{{ item.total }}</p>
                <p>
                  共<span>{{ item.shopId }}</span
                  >件
                </p>
              </div>
              <div class="prod_el_col_3">
                {{ item.payType == 1 ? "微信支付" : "手动支付" }}
              </div>
              <div class="prod_el_col_3">
                {{ item.isPayed == 1 ? "成功" : "失败" }}
              </div>
              <div class="prod_el_col_5">
                <el-button
                  class="button"
                  @click="rowLook(item.orderNumber, item.status)"
                  >查看</el-button
                >
              </div>
            </div>
          </div>
          <div class="remark">
            <p>备注:</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-dialog class="mask" v-model="visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div
        class="my-header"
        style="display: flex; justify-content: space-between"
      >
        <h4 :id="titleId" :class="titleClass">查看</h4>
        <el-button @click="close"> X </el-button>
      </div>
    </template>
    <span>订单编号：{{ orderdetail.orderNumber }}</span>
    <el-steps class="steps" :active="status == 6 ? 0 : status" align-center>
      <el-step title="提交订单" />
      <el-step title="买家已付款" />
      <el-step title="卖家已发货" />
      <el-step title="买家已收货" />
    </el-steps>
    <p>订单状态：{{ orderdetail.payType == 1 ? "成功" : "失败" }}</p>
    <div class="order-info">
      <div class="order_details">
        <div class="detail-title">
          <img src="../../../image/小货车.png" alt="" />
          <p>买家付款后才可以发货</p>
        </div>
        <div class="order-cont">
          <div class="detail01">
            <img src="../../../image/收货地址.png" alt="" />
          </div>
          <div class="cont-wid">
            <div class="el-form-item">
              <span>收货人：</span>{{ orderdetail.userAddrOrder.receiver }}
            </div>
            <div class="el-form-item">
              <span>手机号：</span>{{ orderdetail.userAddrOrder.mobile }}
            </div>
            <div class="el-form-item">
              <span>收货地址：</span>{{ orderdetail.userAddrOrder.province
              }}{{ orderdetail.userAddrOrder.city
              }}{{ orderdetail.userAddrOrder.area
              }}{{ orderdetail.userAddrOrder.addr }}
            </div>
          </div>
        </div>
        <div class="detail01">
          <img src="../../../image/发票.png" alt="" /> <span>不开发票</span>
        </div>
      </div>
      <div class="buyers">
        <div class="detail-title">
          <img src="../../../image/我是买家2.png" alt="" />
          <p>买家：</p>
        </div>
        <div class="detail-title01">
          <img src="../../../image/备注.png" alt="" />
          <p>买家备注：</p>
        </div>
      </div>
    </div>
    <div class="item-list">
      <avue-crud :data="data" :option="option"></avue-crud>
      <div class="item-info">
        <div class="form-item">
          <p>商品总价：￥{{ orderdetail.total }}</p>
        </div>
        <div class="form-item">
          <p>应付金额：￥{{ orderdetail.total }}</p>
        </div>
      </div>
    </div>
    <div class="order-log">
      <div class="log-title">
        <span>订单日志</span>
      </div>
      <div class="log-cont" v-if="status != 6">
        <div class="el-item" v-if="status >= 1">
          {{ orderdetail.updateTime }} 订单更新(成功)
        </div>
        <div class="el-item" v-if="status >= 2">
          {{ orderdetail.payTime }}订单付款(成功)
        </div>
        <div class="el-item" v-if="status >= 3">
          {{ orderdetail.dvyTime }}订单发货(成功)
        </div>
        <div class="el-item" v-if="status >= 4">
          {{ orderdetail.finallyTime }}完成订单(成功)
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import request from "../../../utils/request";
export default {
  data() {
    return {
      list: [],
      orderdetail: JSON.parse(localStorage.getItem("orderdetail")),
      visible: false,
      url: "https://assets.yiluxdeng.com/",
      value: "",
      status: "",
      id: "1597936127778623488",
      defaultTime: [
        new Date(2000, 1, 1, 0, 0, 0),
        new Date(2000, 2, 1, 23, 59, 59),
      ],
      data: JSON.parse(localStorage.getItem("orderdetail")).orderItems,
      option: {
        addBtn: false,
        refreshBtn: false,
        menu: false,
        column: [
          {
            label: "商品",
            width: 300,
            html: true,
            formatter: (val) => {
              return `<img src='https://assets.yiluxdeng.com/${val.pic}' alt=""  width='100' height='100'/> ${val.prodName}`;
            },
          },
          {
            label: "单价",
            width: 300,
            prop: "price",
          },
          {
            label: "数量",
            width: 300,
            prop: "prodCount",
          },
          {
            label: "总价",
            width: 300,
            prop: "productTotalAmount",
          },
        ],
      },
    };
  },
  methods: {
    //点击查看
    rowLook(id, status) {
      this.visible = true;
      this.status = status;
      console.log(status);
      request({
        method: "GET",
        url: `/order/order/orderInfo/${id}?t=${new Date().getTime()}`,
      }).then((res) => {
        localStorage.setItem("orderdetail", JSON.stringify(res.data));
      });
    },
    handleGet() {
      window.open("/cdn/demo.xlsx");
    },
    getListData() {
      request({
        method: "GET",
        url: "order/order/page?current=1&size=10",
      }).then((res) => {
        this.list = res.data.records;
        // localStorage.setItem("list", JSON.stringify(res.data.total));
      });
    },
  },
  mounted() {
    this.getListData();
  },
};
</script>

<style lang="scss">
.mask {
  width: 80%;
  height: 1232px;
  .steps {
    padding: 35px;
  }
  .order-info {
    margin-top: 30px;
    width: 100%;
    height: 320px;
    padding: 20px;
    display: flex;
    .order_details {
      width: 50%;
      border: 1px solid #ccc;
      border-left: none;
      border-right: none;
      border-bottom: none;
      .detail-title {
        display: flex;
        width: 100%;
        height: 70px;
        line-height: 50px;
        border-bottom: 1px dashed #ccc;
        img {
          width: 30px;
          height: 30px;
          margin-top: 10px;
          margin-left: 10px;
        }
        p {
          margin-left: 10px;
        }
      }
      .order-cont {
        height: 180px;
        display: flex;
        .detail01 {
          width: 10%;
          padding-top: 10px;
          text-align: center;
          img {
            width: 30px;
            height: 30px;
          }
        }
        .cont-wid {
          width: 90%;
          .el-form-item {
            height: 50px;
            line-height: 50px;
            margin-left: 10px;
          }
        }
      }
    }
    .buyers {
      width: 50%;
      border: 1px solid #ccc;
      border-right: none;
      border-bottom: none;
      .detail-title {
        display: flex;
        width: 100%;
        height: 70px;
        line-height: 50px;
        border-bottom: 1px dashed #ccc;
        img {
          width: 30px;
          height: 30px;
          margin-top: 10px;
          margin-left: 10px;
        }
        p {
          margin-left: 10px;
        }
      }
      .detail-title01 {
        display: flex;
        width: 100%;
        line-height: 50px;
        img {
          width: 30px;
          height: 30px;
          margin-top: 10px;
          margin-left: 10px;
        }
        p {
          margin-left: 10px;
        }
      }
    }
  }
  .item-list {
    margin-top: 25px;
    .item-info {
      height: 102px;
      .form-item {
        height: 50px;
        line-height: 50px;
        margin-left: 1200px;
      }
    }
  }
  .order-log {
    width: 100%;
    height: 200px;
    .log-title {
      height: 50px;
      font-size: 18px;
    }
    .log-cont {
      height: 150px;
      .el-item {
        line-height: 40px;
        color: #02a1e9;
      }
    }
  }
}

.order_curd {
  width: 100%;
  height: 100%;

  .carousel_header {
    width: 85%;
    height: 50px;
    display: flex;
    align-items: center;

    .car_select {
      width: 230px;
      height: 33px;
      border-radius: 7px;
      margin-right: 10px;
      padding-left: 10px;
      box-sizing: border-box;
      border: solid 1px #ccc;
      margin-left: 20px;
    }
    .car_select1 {
      width: 230px;
      height: 32px;
      border-radius: 7px;
      margin-right: 10px;
      padding-left: 10px;
      box-sizing: border-box;
      border: solid 1px #ccc;
      margin-left: 10px;
    }

    .status {
      display: block;
      width: 70px;
      height: 40px;
      line-height: 40px;
      margin-left: 10px;
      text-align: center;
    }

    .btn {
      margin-right: 10px;
    }
  }

  .tit {
    width: 99%;
    height: 50px;
    line-height: 50px;

    .el_row {
      width: 100%;
      height: 50px;
      display: flex;

      .el_col-10 {
        text-align: center;
        width: 41.66667%;
      }

      .el_col-3 {
        text-align: center;
        width: 12.5%;
      }

      .el_col-2 {
        text-align: center;
        width: 8.33333%;
      }
    }
  }

  .prod {
    width: 100%;
    height: 236.33px;
    border: 1px solid #ccc;
    margin-bottom: 15px;

    .prod_tit {
      width: 100%;
      height: 39.67px;
      line-height: 39.67px;
      background-color: #f8f8f9;
    }

    .prod_cont {
      width: 100%;
      height: 146.67px;

      .prod_el_row {
        width: 100%;
        height: 146.67px;
        border: 1px solid #ccc;
        display: flex;

        .prod_el_col_10 {
          width: 41.66667%;
          border: 1px solid #ccc;
          text-align: center;

          .prod_item {
            padding: 20px;
            width: 100%;

            .items {
              display: flex;

              .image {
                height: 144.67px;

                img {
                  width: 100px;
                  height: 100px;
                }
              }

              .items_cont {
                padding: 10px;

                .price {
                  color: #80a5d4;
                }
              }
            }
          }
        }

        .prod_el_col_3 {
          width: 12.5%;
          border: 1px solid #ccc;
          text-align: center;
          line-height: 130px;
          .total {
            color: #cc0084;
          }
        }
        .prod_el_col_4 {
          width: 12.5%;
          border: 1px solid #ccc;
          text-align: center;
          padding-top: 35px;
          .total {
            height: 20px;
            color: #cc0084;
          }
        }
        .prod_el_col_5 {
          width: 12.5%;
          border: 1px solid #ccc;
          text-align: center;
          line-height: 150px;
          .total {
            color: #cc0084;
          }
        }

        .prod_el_col_2 {
          width: 8.33333%;
          border: 1px solid #ccc;
          text-align: center;
          line-height: 146.67px;

          .button {
            border: none;
            color: #02a1e9;
          }
        }
      }
    }

    .remark {
      width: 100%;
      height: 50px;
      background-color: #e8f7f6;
      border: 1px solid #ccc;

      p {
        line-height: 50px;
        margin-left: 10px;
      }
    }
  }
}
</style>